<script lang="tsx" setup>
/**
 *  采购到货子单
 */
import {nextTick, ref} from "vue"
import {definePageModel, PageModel} from "@/frame/view/layout/page-model/constructor.ts"
import {defineDialogForm, DialogForm} from "@/frame/components/base/dialog-form/constructor.ts"

/**
 * 弹窗配置
 */
const dialogFormRef = ref()
const dialogFormConfig = defineDialogForm({
  width: "1200px",
  title: "采购到货单子单详情"
})
/**
 * 页面配置
 */
const pageModelRef = ref()
const config = definePageModel<any>({
  url: "/api/PurchaseArriveOrder/item",
  getImmediate: false,
  otherParams: {
    id: null
  },
  table: {
    page: {
      enable: true,
      pageSize: 20
    },
    props: {
      stripe: false,
      border: false
    },
    els: [
      {
        label: "物料编码",
        prop: "goodsCode",
        minWidth: 120
      },
      {
        label: "物料名称",
        prop: "goodsName",
        minWidth: 120
      },
      {
        label: "物料规格",
        prop: "goodsSpec",
        minWidth: 120
      }, {
        label: "物料单位",
        prop: "goodsUnit",
        minWidth: 120
      },
      {
        label: "物料描述",
        prop: "goodsDescribe",
        minWidth: 120
      },
      {
        label: "发货数量",
        prop: "numberArrive",
        minWidth: 120
      },
      {
        label: "备注",
        prop: "remark",
        minWidth: 120
      },
      {
        label: "文件上传",
        prop: "file",
        minWidth: 120
      }
    ]
  }
})

/**
 * 显示
 */
const show = (params: any) => {
  nextTick(() => {
    if (config.otherParams) {
      config.otherParams.id = params.id
    }
    dialogFormRef.value.show()
    nextTick(() => {
      pageModelRef.value.refreshTableData()
    })
  })
}

/**
 * 暴露
 */
defineExpose({
  show
})
</script>

<template>
  <DialogForm ref="dialogFormRef" :dialogFormModel="dialogFormConfig">
    <template #default>
      <div style="display: flex;height: 500px;">
        <PageModel ref="pageModelRef" :PageModel="config"/>
      </div>
    </template>
  </DialogForm>
</template>
